<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<title>领取优惠券</title>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<section class="get-coupons">
		<p class="flow-stat"><a href="javascript:;" class="btn-red-line">我的优惠券</a>省内流量57.0MB</p>
		<figure class="gallery-wrap">		
			<div>
				<img src="css/images/1.jpg"/>
				<figcaption>分享得流量，优惠多多</figcaption>
			</div>
			<div>
				<img src="css/images/test.jpg"/>
				<figcaption>分享得流量，优惠多多</figcaption>
			</div>				 	
		</figure>
		<div class="coupons-list">
			<h2>大家都在看</h2>
			<ul>
				<li>
					<div class="coupons-wrap">
						<div class="vc-pic">
							<img src="css/images/1.jpg"/>
						</div>
						<div class="info">
							<p>有效期</p>
							<p class="time">2015-11-21至2015-11-30</p>
						</div>
					</div>
				</li>
				<li>
					<div class="coupons-wrap">
						<div class="vc-pic">
							<img src="css/images/1.jpg"/>
						</div>
						<div class="info">
							<p>有效期</p>
							<p class="time">2015-11-21至2015-11-30</p>
						</div>
					</div>
				</li>
				<li>
					<div class="coupons-wrap">
						<div class="vc-pic">
							<img src="css/images/1.jpg"/>
						</div>
						<div class="info">
							<p>有效期</p>
							<p class="time">2015-11-21至2015-11-30</p>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="coupons-details">
			<h2>优惠券名称</h2>
			<p class="time">有效期:2015-11-21 至 2015-11-30</p>
			<div class="explain">
			</div>
			<span class="btn btn-red jq-get">确认领取</span>
		</div>
	</section>
	<div class="overlay"></div>
	<div class="dialog-modal coupons-comfirm">
		<div>
			<div class="dialog-header">
				<h2>确认领取</h2>
				<span class="dialog-close"></span>
			</div>
			<div class="dialog-content">
					<div class="coupons-wrap">
						<div class="vc-pic">
							133元
						</div>
						<div class="info">
							<p>有效期</p>
							<p class="time">2015-11-21至2015-11-30</p>
						</div>
					</div>
					<p class="tips">恭喜您兑换成功!</p>
			</div>
			<div class="dialog-footer">
				<span class="btn btn-normal jq-confirm">确认</span><span class="btn btn-normal jq-cancle">取消</span>
			</div>
		</div>
	</div>
	<!--失败时弹出-->
	<div class="dialog-modal coupons-comfirm">
		<div>
			<div class="dialog-header">
				<h2>确认领取</h2>
				<span class="dialog-close"></span>
			</div>
			<div class="dialog-content">
				<div class="t-center"><img src="css/images/failed.jpg" class="result"/></div>
				<p class="tips">流量余额不足</p>
			</div>
			<div class="dialog-footer">
				<span class="btn btn-normal jq-confirm">去赚流量</span><span class="btn btn-normal jq-cancle">领取其它</span>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.gallery-wrap').slidesjs({
	    		navigation: false
			});
			$('.coupons-list li').on('click',function(){
				$('.coupons-list').hide();
				$('.coupons-details').show();
			});
			$('.jq-get').on('click',function(){
				$('.dialog-modal').mobDialog();
			});
			$('.jq-cancle,.dialog-close').on('click',function(){
				$('.dialog-modal').mobDialog('close');
			});
			$('.jq-comfirm').on('click',function(){
				
			});
		});
	</script>
</body>
</html>